<template>
  <div class="mat-info-container">
    <div class="matInfo flex row justify-between">
      <div class="wide-cell">
        <span class="name">材料号</span>
        <span class="val">{{ orderInfo.matNo }}</span>
      </div>
      <div>
        <span class="name">起吊位</span>
        <span class="val">{{ orderInfo.frPos }}</span>
      </div>
      <div>
        <span class="name">卸下位</span>
        <span class="val">{{ orderInfo.toPos }}</span>
      </div>
      <div>
        <span class="name">材料状态</span>
        <span class="val">{{ orderInfo.matStatus }}</span>
      </div>
      <div>
        <span class="name">下道机组</span>
        <span class="val">{{ orderInfo.nextUnitNo }}</span>
      </div>
      <div>
        <span class="name">指令状态</span>
        <span class="val">{{ orderInfo.orderStatusText }}</span>
      </div>
      <div>
        <span class="name">指令类型</span>
        <span class="val">{{ orderInfo.orderDescription }}</span>
      </div>
      <div>
        <span class="name">指令号</span>
        <span class="val">{{ orderInfo.orderNo }}</span>
      </div>
      <div>
        <span class="name">宽度</span>
        <span class="val">{{ orderInfo.width }}</span>
      </div>
      <div>
        <span class="name">卷径</span>
        <span class="val">{{ '???' }}</span>
      </div>
    </div>
    <div class="opr flex column justify-between">
      <img src="~/assets/terminal/1_bt_up.png" alt="起吊" @click="handleOpr('1', '起吊')" />
      <img src="~/assets/terminal/1_bt_down.png" alt="卸下" @click="handleOpr('2', '卸下')" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import { useQuasar } from 'quasar';
import { storeToRefs } from 'pinia';

import { useTerminalStore } from '../store';
import { getMatInfo, orderOperate } from '../api';

export default defineComponent({
  name: 'terminal-crane-mat-info',

  props: {
    craneNo: {
      type: String,
      required: true,
    },
  },

  setup(props) {
    const $q = useQuasar();
    const orderInfo = ref<Record<string, string>>({});

    const terminalStore = useTerminalStore();
    const { currentOrderNo } = storeToRefs(terminalStore);
    const statusMap: Record<string, string> = {
      '2': '正常',
      '11': '选中',
      '13': '吊起',
    };
    watch([() => currentOrderNo.value?.orderNo, () => currentOrderNo.value?.orderStatus], async ([newVal1]) => {
      if (newVal1) {
        const { data } = await getMatInfo(newVal1);
        orderInfo.value = {
          ...data,
          orderStatusText: statusMap[data.orderStatus] || '未知状态', // 添加状态文字描述
        };
        console.log('指令类型:', orderInfo.value);
      } else {
        orderInfo.value = {};
      }
    });

    const handleOpr = (type: string, txt: string) => {
      $q.dialog({
        title: '确认',
        message: `确定要执行[${txt}]操作吗？`,
        cancel: {
          label: '取消',
          flat: true,
          color: 'white',
        },
        ok: {
          label: '确认',
          flat: true,
          color: 'white',
        },
        persistent: true,
        style: {
          backgroundImage: "url('src/assets/terminal/popup_bg.png')",
          backgroundSize: 'contain',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center',
          backgroundColor: 'transparent',
          color: '#fff',
          padding: '50px',
          fontFamily: 'AlibabaPuHuiTi, sans-serif',
        },
      }).onOk(async () => {
        const params = {
          craneNo: props.craneNo,
          orderNo: orderInfo.value?.orderNo,
          operType: type,
          currentPos: '',
        };
        orderOperate(params).then(() => {
          $q.notify({ message: '操作成功', timeout: 3000 });
        });
      });
    };

    return { orderInfo, handleOpr };
  },
});
</script>
<style lang="scss" scoped>
.mat-info-container {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.matInfo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 900px; /* 调整宽度以适应 1024px 屏幕 */
  height: 100px;
  font-size: 14px;
  color: #fff;
  div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90px; /* 根据总宽度调整每个 div 的宽度 */
    background-color: rgba(27, 33, 34, 1);
    text-align: center;
    .name {
      margin-top: 10px;
    }
    .val {
      width: 70px;
      height: 28px;
      line-height: 28px;
      margin-top: 10px;
      border-bottom: 3px solid rgba(44, 202, 234, 0.4);
    }
  }
  .wide-cell {
    width: 90px; /* 单独为这一格指定宽度 */
    .val {
      width: 80px; /* 调整内容宽度 */
    }
  }
}

.opr {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 57px;
  height: 130px;
  margin-left: 10px; /* 调整 .opr 和 .matInfo 之间的间距 */
  img {
    width: 40px;
    height: 40px;
    cursor: pointer;
    margin-bottom: -10px; /* 调整图片之间的间距 */
    &:hover {
      width: 57px;
      height: 57px;
    }
  }
  img:last-child {
    margin-bottom: 15px; /* 确保最后一个图片没有额外的下边距 */
  }
  img:first-child {
    margin-top: 15px; /* 确保第一个图片向下移动 */
  }
}
</style>
